/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  TouchableHighlight,
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';
import Request from '../Common/Request';
import Config from '../Common/Config';

const {width, height} = Dimensions.get('window');

export default class Item extends Component {
    constructor(props) {
        super(props)
        this.state = {
            rowData: this.props.rowData,
            like: false,
        }
    }

    _onLikePress() {
        let like = !this.state.like
        let body = {
            id: this.state.rowData._id,
            like: like ? 'yes' : 'no',
            accessToken: 'kelvin',
        }
        Request.post(Config.api.base + Config.api.like, body)
        .then((response) => {
            if (response && response.success) {
                console.log(response);
                this.setState({
                    like: like
                })
            } else {
                alert('返回数据为空')
            }
        })
        .catch((error) => {
            console.log(error);
            alert('网络错误,请稍后重试')
        })
    }

    _loadPage() {
        this.props.onSelect(this.state.rowData)
    }

  render() {
      let data = this.state.rowData
    return (
        <View style={styles.item}>
            <Text style={styles.title}>
                {data.title}
            </Text>
            <TouchableHighlight onPress={this._loadPage.bind(this)}>
                <Image style={styles.img} source={{uri: data.thumb_url}} >
                    <Icon
                        name='ios-play'
                        size={28}
                        style={styles.playIcon}
                    />
                </Image>
            </TouchableHighlight>
            <View style={styles.bottomBar}>
                <View style={styles.handleBox}>
                    <Icon
                        name={this.state.like ? 'ios-heart' : 'ios-heart-outline'}
                        size={28}
                        style={styles.likeIcon}
                        onPress={this._onLikePress.bind(this)}
                    />
                <Text style={styles.handleText} onPress={this._onLikePress.bind(this)}>
                        点赞
                    </Text>
                </View>
                <View style={styles.handleBox}>
                    <Icon
                        name='ios-chatbubbles'
                        size={28}
                        style={styles.commentIcon}
                    />
                    <Text style={styles.handleText}>
                        评论
                    </Text>
                </View>
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    item: {
        width: width,
        marginBottom: 10,
        backgroundColor: 'white',
    },
    title: {
        fontSize: 18,
        padding: 10,
        color: '#333',
    },
    img: {
        width: width,
        height: width * 0.56,
        resizeMode: 'cover',
    },
    playIcon: {
        position: 'absolute',
        bottom: 14,
        right: 14,
        width: 46,
        height: 46,
        paddingTop: 9,
        paddingLeft: 18,
        backgroundColor: 'transparent',
        borderWidth: 1,
        borderColor: 'red',
        borderRadius: 23,
        color: '#ed7b66',
    },
    bottomBar: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: '#eee',
    },
    handleBox: {
        padding: 10,
        flexDirection: 'row',
        width: width * 0.5 - 0.5,
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    likeIcon: {
        fontSize: 22,
        color: '#333',
    },
    commentIcon: {
        fontSize: 22,
        color: '#333',
    },
    handleText: {
        fontSize: 18,
        color: '#333',
        paddingLeft: 10,
    },
});
